<template>
	<div class="page">
		<!-- <van-picker v-model="selectedValues" title="标题" :columns="columns" /> -->
		<van-field
			v-model="fieldValue"
			is-link
			readonly
			label="城市"
			placeholder="选择城市"
			@click="showPicker = true"
		/>
		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker
				:columns="columns"
				@cancel="showPicker = false"
				@confirm="onConfirm"
			/>
		</van-popup>
		<van-cell-group inset>
			<van-cell title="单元格" value="内容">123</van-cell>
			<van-cell title="单元格" value="内容" label="描述信息" />
		</van-cell-group>
		<van-swipe-cell>
			<van-card
				num="288"
				price="2.00"
				desc="描述信息"
				title="商品标题11"
				class="goods-card"
				thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
			/>
			<template #right>
				<!-- <van-button
					square
					text="删除"
					type="danger"
					class="delete-button"
				/> -->
				222
			</template>
		</van-swipe-cell>

		<van-count-down
			ref="countDown"
			millisecond
			:time="1000 * 60"
			:auto-start="false"
			format="ss"
			@finish="finish"
		/>
		<van-grid clickable>
			<van-grid-item text="开始" icon="play-circle-o" @click="start" />
			<van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
			<van-grid-item text="重置" icon="replay" @click="reset" />
		</van-grid>
		<van-field
			v-model="username"
			error-message="手机号格式错误"
			required
			label="用户名"
			placeholder="请输入用户名"
			is-link
			arrow-direction="down"
		/>

		<div>123</div>
		<van-form ref="form" @submit="onSubmit">
			<!-- 通过 pattern 进行正则校验 -->
			<van-field
				v-model="value1"
				name="pattern"
				required
				placeholder="正则校验"
				:rules="[{ pattern, message: '请输入正确内容' }]"
			/>
			<!-- 通过 validator 进行函数校验 -->
			<van-field
				v-model="value2"
				name="value2"
				required
				placeholder="函数校验"
				:rules="[{ validator, message: '请输入正确内容' }]"
			/>
			<van-button @click="getCode" native-type="button"
				>获取验证码</van-button
			>
			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>提交</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			columns: [
				{ text: '杭州', value: 'Hangzhou' },
				{ text: '宁波', value: 'Ningbo' },
				{ text: '温州', value: 'Wenzhou' },
				{ text: '绍兴', value: 'Shaoxing' },
				{ text: '湖州', value: 'Huzhou' },
			],
			selectedValues: 'hangzhou',
			fieldValue: '',
			showPicker: false,
			username: '',
			value1: '',
			value2: '',
			value3: '',
			pattern: /\d{6}/,
			rules: {
				value2: {
					validator: (val) => {
						if (val > 10) return true
						else return false
					},
				},
			},
		}
	},
	methods: {
		validator: (val) => {
			if (val > 10) return true
			else return false
		},
		start() {
			this.$refs.countDown.start()
		},
		pause() {
			this.$refs.countDown.pause()
		},
		reset() {
			this.$refs.countDown.reset()
		},
		finish() {
			// Toast('倒计时结束')
		},
		getCode() {
			console.log(123)
			this.$refs.form
				.validate('value1')
				.then(() => {
					// 验证通过后的逻辑
					console.log('用户名验证通过，提交表单')
				})
				.catch(() => {
					// 验证失败的逻辑
					console.log('用户名验证失败')
				})
			// console.log('validate-->', this.$refs.form.validate('value1'))
		},
		onSubmit(values) {
			// console.log('validate-->', this.$refs.form.validate('value1'))
			// this.$refs.form.resetValidation()
			// if()
			console.log('提交-->', values)
		},

		// async onSubmit() {
		// 	try {
		// 		// 使用 validate 方法进行验证
		// 		await this.$refs.form.validate()
		// 		// 验证通过后执行提交逻辑
		// 		console.log('验证通过，执行提交操作')
		// 	} catch (err) {
		// 		// 验证失败处理
		// 		console.log('验证失败', err)
		// 	}
		// },
	},
}
</script>

<style scoped>
.page {
	background-color: #edf2fa;
}

.goods-card {
	margin: 0;
	background-color: white;
}

.delete-button {
	height: 100%;
}
</style>
